// Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);

// Background image
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
bgReady = true;
};
bgImage.src = "images/background.png";

// Hero image
var heroReady = false;
var heroImage = new Image();
heroImage.onload = function () {
heroReady = true;
};
heroImage.src = "images/hero1.gif";

// Monster image
var monsterReady = false;
var monsterImage = new Image();
monsterImage.onload = function () {
monsterReady = true;
};
monsterImage.src = "images/monster1.gif";

// Chomp sound
var snd = new Audio("audio/bell.wav");

// Game objects
var hero = { speed: 256, // movement in pixels per second
x: 0, y: 0
};
var monster = { x: 0, y: 0 };
var monstersCaught = 0;

// Handle keyboard controls
var keysDown = {};
addEventListener("keydown", function (e) { keysDown[e.keyCode] = true; }, false);
addEventListener("keyup", function (e) { delete keysDown[e.keyCode]; }, false);

var start = true;
// Reset the game when the player catches a monster
var reset = function () {
if (start){
hero.x = canvas.width / 2;
hero.y = canvas.height / 2;
start = false;
}
// Throw the monster somewhere on the screen randomly
monster.x = 32 + (Math.random() * (canvas.width - 150));
monster.y = 32 + (Math.random() * (canvas.height - 150));

if(snd.currentTime > 0)
{
snd.currentTime=0;
//this is to make sure the sound resets if it is still playing
}
snd.play();
};

// Update game objects
var update = function (modifier) {
if (38 in keysDown) { // Player holding up
hero.y= (hero.y > 20) ? (hero.y - hero.speed * modifier) : hero.y=20;
}
if (40 in keysDown) { // Player holding down
hero.y= (hero.y < 320) ? (hero.y + hero.speed * modifier) : hero.y=320;
}
if (37 in keysDown) { // Player holding left
hero.x = (hero.x > 20) ? (hero.x - hero.speed * modifier) : hero.x=20;
}
if (39 in keysDown) { // Player holding right
hero.x= (hero.x < 400) ? (hero.x + hero.speed * modifier) : hero.x=400;
}
// Are they touching?
if ( hero.x <= (monster.x + 50) && monster.x <= (hero.x + 60) && hero.y <= (monster.y + 100) && monster.y <= (hero.y + 100) ) {
++monstersCaught;
reset(); }
};

// Draw everything
var render = function () {
if (bgReady) {
ctx.drawImage(bgImage, 0, 0); }
if (heroReady) {
ctx.drawImage(heroImage, hero.x, hero.y); }
if (monsterReady) {
ctx.drawImage(monsterImage, monster.x, monster.y); }
// Score
ctx.fillStyle = "rgb(250, 250, 0)";
ctx.font = "24px Helvetica";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText("Goblins caught: " + monstersCaught, 280, 32);
};

// The main game loop
var main = function () {
var now = Date.now();
var delta = now - then;
update(delta / 1000); render(); then = now;
};

// Let's play this game!
reset();
var then = Date.now();
setInterval(main, 1); // Execute as fast as possible